import { FC, useMemo, useState } from 'react';
import ToolBar from '@/page-compoennt/monitor/main/ToolBar';
import useSWR from 'swr';
import { fetchMonitor } from '@/service/monitor';
import MinerCountStrip from '@/components/miner-count-strip/MinerCountStrip';
import MonitorCard from '@/page-compoennt/monitor/main/MonitorCard';
import PageFooter from '@/page-compoennt/monitor/PageFooter';
import { Button } from 'antd';

const MonitorMain: FC = () => {
  const [isLookOnline, setIsLookOnline] = useState(true);
  const { data: monitorPageModel } = useSWR('/monitor', fetchMonitor);

  const curShowMonitorList = useMemo(() => {
    if (!monitorPageModel) {
      return [];
    }
    if (isLookOnline) {
      return monitorPageModel.onlineList;
    } else {
      return monitorPageModel.allList;
    }
  }, [isLookOnline, monitorPageModel]);

  if (!monitorPageModel) {
    return null;
  }
  return (
    <div style={{ padding: '0 5px' }}>
      <ToolBar
        setIsLookOnline={setIsLookOnline}
        isLookOnline={isLookOnline}
        versionOptions={monitorPageModel.versionOptions}
      />
      {curShowMonitorList.map((monitor) => (
        <MonitorCard monitor={monitor} key={monitor.id} />
      ))}
      <div className={`text-center`} style={{ padding: '24px 0' }}>
        <Button
          style={{ borderColor: '#EDF2F9', width: '193px' }}
          size="large"
          shape="round"
        >
          没有找到您的矿场?
        </Button>
      </div>
      <PageFooter />
    </div>
  );
};
export default MonitorMain;
